<template>
    <div>
        <el-container>
            <el-header style="text-align: left; font-size: 18px">
                <div class="title" style="font-weight: 540; font-size: 22px;">
                    订单详情
                </div>
            </el-header>
            <el-main>
                <el-card class="box-card" style="margin-bottom: 20px;">
                    <div slot="header">
                        <span>患者信息</span>
                    </div>
                    <div class="item" style="min-height: 160px;">
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>患者姓名</small> </p>
                            <p><span>{{ tableData.userName }}</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>证件类型</small></p>
                            <p><span>身份证</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>用户名</small> </p>
                            <p><span>{{ tableData.userName }}</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>地址</small></p>
                            <p><span>北京市朝阳区**路**区</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>就诊卡号</small></p>
                            <p><span>{{ tableData.orderForm
                            }}</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>证件号码</small></p>
                            <p><span>{{ tableData.id }}</span></p>
                        </div>
                        <div class="text" style="display: flex;">
                            <p class="card_span"><small>手机号</small></p>
                            <p><span>{{ tableData.seeNum }}</span></p>
                        </div>

                        <div class="pic">
                            <div class="block" style="margin-bottom: 40px;">
                                <div class="card_span" style="height: 60px;line-height: 60px;padding-right: 15px;">
                                    <small>患者头像</small>
                                </div>
                                <el-avatar style="display: block;" :size="60"
                                    src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png">
                                </el-avatar>
                            </div>
                            <div class="item" style="display: flex;">
                                <p class="card_span">
                                    <small>关系</small>
                                </p>
                                <p style="margin-left: 50px;"><span>本人</span></p>
                            </div>
                        </div>
                    </div>
                </el-card>
                <el-card class="box-card" style="margin-bottom: 20px;">
                    <div slot="header">
                        <span>就诊信息</span>
                    </div>
                    <div>
                        <ul class="Information_box">
                            <li>
                                <div class="connet1"><span style="color: #AAAAAA;">就诊医院</span><span
                                        style="margin-left: 70px;">北京市第一人民医院/东院</span><span
                                        style="color: #AAAAAA;margin-left: 70px;">医院地址</span><span
                                        style="margin-left: 70px;">北京市大兴区**路990号</span><span
                                        style="color: #AAAAAA;margin-left: 95px;">就诊科室</span><span
                                        style="margin-left: 60px;">消化内科-门诊3楼东区501</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet2">
                                    <span style="color: #AAAAAA;">就诊医生</span>
                                    <span style="margin-left: 70px;">赵马</span>
                                    <span style="color: #AAAAAA;margin-left: 219px;">医生职称</span>
                                    <span style="margin-left: 70px;">主任医师</span>
                                    <span style="color: #AAAAAA;margin-left: 197px;">业务类型</span>
                                    <span style="margin-left: 60px;">门诊缴费</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet3">
                                    <span style="color: #AAAAAA;">费用类型</span>
                                    <span style="margin-left: 70px;">西药费</span>
                                </div>
                            </li>
                            <li>
                                <div class="connet3">
                                    <span style="color: #AAAAAA;">费用明细</span>
                                    <div style="width: 531px;margin-top: 10px;">
                                        <el-table :data="Data" border>
                                            <el-table-column type="index" label="序号" width="50" align="center">
                                            </el-table-column>
                                            <el-table-column property="name" label="项目名称" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column property="price" label="单价(元)" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column property="num" label="数量" width="120" align="center">
                                            </el-table-column>
                                            <el-table-column label="小计(元)" width="120" align="center">
                                                <template slot-scope={row}>
                                                    {{ row.price * row.num }}
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>

                                </div>
                            </li>
                        </ul>
                    </div>
                </el-card>
                <el-card class="box-card" style="margin-bottom: 20px;">
                    <div slot="header">
                        <span>订单信息</span>
                    </div>

                    <div class="item">
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>订单总额</small> </p>
                            <p><span>{{ tableData.userName }}</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>支付方式</small></p>
                            <p><span>身份证</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>押金余额</small> </p>
                            <p><span>{{ tableData.userName }}</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>订单状态</small></p>
                            <p><span>北京市朝阳区**路**区</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>订单编号</small></p>
                            <p><span>{{ tableData.orderForm
                            }}</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>结算时间</small></p>
                            <p><span>{{ tableData.id }}</span></p>
                        </div>
                        <div class="info" style="display: flex;">
                            <p class="card_span"><small>结算医生</small></p>
                            <p><span>{{ tableData.seeNum }}</span></p>
                        </div>
                    </div>
                    <div style="line-height: 40px;">
                        <el-row :gutter="20">
                            <el-col :span="2">
                                <span>订单备注</span>
                            </el-col>
                            <el-col :span="10">
                                <el-input v-model="input" placeholder="请输入内容"></el-input>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="margin-top: 30px;margin-left: 100px;">
                        <el-button type="primary" @click="go">保存</el-button>
                        <el-button type="primary" @click="gotofuyi" plain>取消</el-button>
                    </div>
                </el-card>

            </el-main>
        </el-container>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            input: '',
            tableData: [],
            Data: [{
                price: 50,
                name: '普罗布考片',
                num: 3,

            }, {
                price: 100,
                name: '阿司匹林肠溶片',
                num: 2,

            },]
        }
    },
    created() {
        // console.log(this.$route.query.id);
        const _id = this.$route.query.id
        axios({
            url: ` http://10.50.8.151:3000/outSerConsume/${_id}`
        }).then(res => {
            this.tableData = res.data
            // console.log(res.data);
        })
    },
    methods:{
        go(){
            this.$message({
                message: '保存成功',
                type: 'success'
            })
            // javascript: history.back(-1);
            this.$router.go(-1);
        },
        // 取消按钮
        gotofuyi(){
            this.$router.go(-1);
        }
    }
}
</script>
<style lang="scss" scoped>
.title {
    position: relative;
    margin-left: 40px;

    &:before {
        top: 10px;
        left: -40px;
        position: absolute;
        display: block;
        width: 27px;
        height: 10px;
        border-radius: 8px 10px 10px 8px;
        background: rgba(0, 110, 255, 1);
        content: '';
    }
}

.el-button {
    padding: 12px 38px;
}

.text {
    width: 40%;
    height: 46px;
}

.info {
    width: 33%;
    height: 46px;
}

.item {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.el-card ::v-deep .el-card__header {
    padding: 15px;
    background-color: #ccc;
    color: #006EFF;
}

.card_span {
    font-size: 16px;
    width: 70px;
    margin-right: 30px;
    line-height: 23px;
    color: #ccc;
}

.pic {
    position: absolute;
    right: 30px;
    top: 10px;
}

.block {
    display: flex;
    margin-bottom: 20px;
}

.connet1 {
    padding: 20px 0 0 15px;
}

.connet2 {
    padding: 20px 0 20px 15px;
}

.connet3,
.connet4,
.connet5 {
    padding: 0 0 20px 15px;
}

.connet6 {
    padding-left: 15px;
}

.Information_box {
    display: flex;
    flex-direction: column;
}
</style>